@base-color: #929292;

.fz(@fontSize) {
  font-size: @fontSize;
}

.center(@width) {
  width: @width;
  margin: 0 auto;
}

.toBlock(@w: 0px, @h: 0px) {
  width: @w;
  height: @h;
}

.flexCenter(@direction: row) {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

header {
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  background-color: rgb(236, 236, 236);

  .top-nav {
    .center(1200px);

    li {
      float: left;

      a {
        color: @base-color;
        padding: 0 10px;
        border-right: 1px solid #b1b1b1;

        span {
          color: red;
        }
      }

      &:last-of-type {
        a {
          border-right: 0;
        }
      }
    }
  }

  a {
    color: #929292;
    padding: 0 10px;
    border-right: 1px solid #b1b1b1;
  }

  li {
    float: left;
  }

  .left_nav {
    li:last-of-type {
      a {
        border-right: 0 none;
      }
    }
  }

  .right_nav {
    li:last-of-type {
      a {
        border-right: 0 none;
      }

      span {
        color: #ff232d;
      }
    }
  }

  .top-search-container {
    height: 8rem;

    .container {
      height: inherit;

      .left_icon {
        padding: 2rem;
        border: none;
      }

      .search_container {
        height: inherit;
        .flexCenter();

        input {
          .toBlock(20rem, 3rem);
          border-color: orange;
          padding: 0 1rem;
        }

        button {
          .toBlock(3.5rem, 3rem);
          border-color: orange;
        }
      }
    }

  }
}

